<template>
	<div class="act_list">
		<div class="blanks"></div>
		<x-header  :left-options="{backText: '',preventGoBack:true}" @on-click-back="goBack">
			<div class="header_tab">
				<tab>
					<tab-item :selected="selectIndex===0" @on-item-click="onItemClick">新建活动</tab-item>
					<tab-item :selected="selectIndex===1" @on-item-click="onItemClick">已创建活动</tab-item>
				</tab>
			</div>
			<a slot="right" style="color: #fff;"></a>
		</x-header>
		<!-- 新建活动 -->
		<div class="content" v-if="selectIndex === 0">
			<div class="header" @click="goMonthlyReport">
				<img src="../../assets/images/activity/banner.jpg" alt="" />
			</div>
			<div class="all_acts">
				<!-- 秒杀活动 -->
				<div class="act_lists">
					<div class="act_icon">
						<img src="../../assets/images/activity/act_3.jpg" alt="" />
					</div>
					<div class="act_texts">
						<div class="act_text">
							<p>
								<span>秒杀活动</span>
								<img src="../../assets/images/activity/new.jpg" alt="" />
							</p>
						</div>
						<p>引流&amp;促销</p>
					</div>
					<div class="act_btn" @click="goSeckill()">
						<button>新建</button>
					</div>
				</div>
				<!-- 市场活动 -->
				<div class="act_lists">
					<div class="act_icon">
						<img src="../../assets/images/activity/act_4.jpg" alt="" />
					</div>
					<div class="act_texts">
						<div class="act_text">
							<p>
								<span>市场活动</span>
								<img src="../../assets/images/activity/new.jpg" alt="" />
							</p>
						</div>
						<p>引流&amp;促销</p>
					</div>
					<div class="act_btn" @click="goMarket()">
						<button>新建</button>
					</div>
				</div>
				<div class="act_lists">
					<div class="act_icon">
						<img src="../../assets/images/activity/act_1.jpg" alt="" />
					</div>
					<div class="act_texts">
						<div class="act_text">
							<p>
								<span>店内领券</span>
								<img src="../../assets/images/activity/new.jpg" alt="" />
							</p>
						</div>
						<p>提升下单转化率&nbsp;客单价</p>
					</div>
					<div class="act_btn" @click="goCreateAct(1)">
						<button>新建</button>
					</div>
				</div>
				<div class="act_lists">
					<div class="act_icon">
						<img src="../../assets/images/activity/act_2.jpg" alt="" />
					</div>
					<div class="act_texts">
						<div class="act_text">
							<p>
								<span>店外领券</span>
								<img src="../../assets/images/activity/new.jpg" alt="" />
							</p>
						</div>
						<p>店外引流，获取额外客源</p>
					</div>
					<div class="act_btn" @click="goCreateAct(2)">
						<button>新建</button>
					</div>
				</div>
				<div class="act_lists">
					<div class="act_icon">
						<img src="../../assets/images/activity/act_3.jpg" alt="" />
					</div>
					<div class="act_texts">
						<div class="act_text">
							<p>
								<span>满减活动</span>
							</p>
						</div>
						<p>引流&amp;促销</p>
					</div>
					<div class="act_btn" @click="goCreateAct(3)">
						<button>新建</button>
					</div>
				</div>
				<div class="act_lists">
					<div class="act_icon">
						<img src="../../assets/images/activity/act_4.jpg" alt="" />
					</div>
					<div class="act_texts">
						<div class="act_text">
							<p>
								<span>减配送费</span>
							</p>
						</div>
						<p>引流&amp;促销</p>
					</div>
					<div class="act_btn" @click="goCreateAct(4)">
						<button>新建</button>
					</div>
				</div>				
				<div class="act_lists">
					<div class="act_icon">
						<img src="../../assets/images/activity/act_6.jpg" alt="" />
					</div>
					<div class="act_texts">
						<div class="act_text">
							<p>
								<span>下单返券</span>
							</p>
						</div>
						<p>复购</p>
					</div>
					<div class="act_btn" @click="goCreateAct(6)">
						<button>新建</button>
					</div>
				</div>
				<div class="act_lists">
					<div class="act_icon">
						<img src="../../assets/images/activity/act_7.jpg" alt="" />
					</div>
					<div class="act_texts">
						<div class="act_text">
							<p>
								<span>新客立减</span>
							</p>
						</div>
						<p>拉新</p>
					</div>
					<div class="act_btn" @click="goCreateAct(7)">
						<button>新建</button>
					</div>
				</div>
			</div>
		</div>
		<!-- 已创建活动 -->
		<div class="content2" v-if="selectIndex===1">
			<div class="status_nav">
				<div class="tab_status_nav">
					<tab>
						<tab-item :selected="selectIndex1===0" @on-item-click="onItemClick2">待生效</tab-item>
						<tab-item :selected="selectIndex1===1" @on-item-click="onItemClick2">进行中</tab-item>
						<tab-item :selected="selectIndex1===2" @on-item-click="onItemClick2">已结束</tab-item>
					</tab>
				</div>
			</div>

			<!-- 待生效 -->
			<div class="goods_lists" v-if="selectIndex1===0">
				<scroller noDataText="" :on-infinite="infinites2" ref='myScroller2' class='myScroller2'>
					<div>
						<div class="goods_list" v-for="item in effectData" :key="item.id">
							<div class="goods_list_subject">
								<p v-if="item.coupon_usage === 1">满减</p>
								<p v-if="item.coupon_usage === 2">直减</p>
								<p>待生效&nbsp;剩余<span>{{  item.expire_date | differDays }}天</span></p>
							</div>
							<div class="goods_list_detail" style="padding-bottom:.3rem;">
								<p>
									<span>活动类型：</span>
									<span v-if="item.coupon_usage === 1">满减</span>
									<span v-if="item.coupon_usage === 2">直减</span>
								</p>
								<p>
									<span>面向用户：</span>
									<span v-if="item.coupon_mode === 1">用户领取</span>
									<span v-if="item.coupon_mode === 2">直接使用</span>
									<span v-if="item.coupon_mode === 3">支付满返券</span>
									<span v-if="item.coupon_mode === 4">本店新用户</span>
									<span v-if="item.coupon_mode === 5">平台新用户</span>
								</p>
								<p>
									<span>名称：</span>
									<span>{{ item.name }}</span>
								</p>
								<p>
									<span>成本承担：</span>
									<span>商家承担{{ item.amount }}元</span>
								</p>
								<p>
									<span>开始时间：</span>
									<span>{{ item.start_date }}</span>
								</p>
								<p>
									<span>结束时间：</span>
									<span>{{ item.expire_date }}</span>
								</p>
								<p>
									<span>创建日期：</span>
									<span>{{ item.created }}</span>
								</p>
							</div>
						</div>
					</div>
					<div v-if="effectData.length>0" style="height:1.4rem;background:#efefef;"></div>
				</scroller>
			</div>

			<!-- 进行中 -->
			<div class="goods_lists" v-if="selectIndex1===1">
				<scroller noDataText="" :on-infinite="infinites1" ref='myScroller1' class='myScroller1'>	
					<div>
						<div class="goods_list" v-for="item in processData" :key="item.id">
							<div class="goods_list_subject">
								<p v-if="item.coupon_usage === 1">满减</p>
								<p v-if="item.coupon_usage === 2">直减</p>
								<p>进行中&nbsp;剩余<span>{{  item.expire_date | differDays }}天</span></p>
							</div>
							<div class="goods_list_sum">
								<div class="goods_list_sum_1" style="width:20%;">
									<p>昨日销量</p>
									<p v-if="item.yesterday"><span>{{ item.yesterday.amount }}</span>份</p>
									<p v-else><span>0</span>份</p>
								</div>
								<div class="goods_list_sum_1" style="width:20%;">
									<p>总计销量</p>
									<p><span>{{ item.count }}</span>份</p>
								</div>
								<div class="goods_list_sum_1" style="width:30%;">
									<p>昨日流水</p>
									<p v-if="item.yesterday"><span>{{ item.yesterday.money }}</span>元</p>
									<p v-else><span>0</span>元</p>
								</div>
								<div class="goods_list_sum_1" style="width:30%;">
									<p>总计流水</p>
									<p><span>{{ item.money }}</span>元</p>
								</div>
							</div>
							<div class="goods_list_detail">
								<p>
									<span>活动类型：</span>
									<span v-if="item.coupon_usage === 1">满减</span>
									<span v-if="item.coupon_usage === 2">直减</span>
								</p>
								<p>
									<span>面向用户：</span>
									<span v-if="item.coupon_mode === 1">用户领取</span>
									<span v-if="item.coupon_mode === 2">直接使用</span>
									<span v-if="item.coupon_mode === 3">支付满返券</span>
									<span v-if="item.coupon_mode === 4">本店新用户</span>
									<span v-if="item.coupon_mode === 5">平台新用户</span>
								</p>
								<p>
									<span>名称：</span>
									<span>{{ item.name }}</span>
								</p>
								<p>
									<span>成本承担：</span>
									<span>商家承担{{ item.amount }}元</span>
								</p>
								<p>
									<span>开始时间：</span>
									<span>{{ item.start_date }}</span>
								</p>
								<p>
									<span>结束时间：</span>
									<span>{{ item.expire_date }}</span>
								</p>
								<p>
									<span>创建日期：</span>
									<span>{{ item.created }}</span>
								</p>
								<div class="look_details" @click="goDiscount(item.id)">
									<button>查看详情</button>
								</div>
							</div>
						</div>
					</div>
					<div v-if="processData.length>0" style="height:1.4rem;background:#efefef;"></div>
				</scroller>
			</div>

			<!-- 已结束 -->
			<div class="goods_lists" v-if="selectIndex1===2">
				<scroller noDataText="" :on-infinite="infinites3" ref='myScroller3' class='myScroller3'>
					<div>
						<div class="goods_list" v-for="item in endData" :key="item.id">
							<div class="goods_list_subject">
								<p v-if="item.coupon_usage === 1">满减</p>
								<p v-if="item.coupon_usage === 2">直减</p>
								<p>已结束</p>
							</div>
							<div class="goods_list_sum">
								<div class="goods_list_sum_1" style="width:20%;">
									<p>昨日销量</p>
									<p v-if="item.yesterday"><span>{{ item.yesterday.amount }}</span>份</p>
									<p v-else><span>0</span>份</p>
								</div>
								<div class="goods_list_sum_1" style="width:20%;">
									<p>总计销量</p>
									<p><span>{{ item.count }}</span>份</p>
								</div>
								<div class="goods_list_sum_1" style="width:30%;">
									<p>昨日流水</p>
									<p v-if="item.yesterday"><span>{{ item.yesterday.money }}</span>元</p>
									<p v-else><span>0</span>元</p>
								</div>
								<div class="goods_list_sum_1" style="width:30%;">
									<p>总计流水</p>
									<p><span>{{ item.money }}</span>元</p>
								</div>
							</div>
							<div class="goods_list_detail" style="padding-bottom:.3rem;">
								<p>
									<span>活动类型：</span>
									<span v-if="item.coupon_usage === 1">满减</span>
									<span v-if="item.coupon_usage === 2">直减</span>
								</p>
								<p>
									<span>面向用户：</span>
									<span v-if="item.coupon_mode === 1">用户领取</span>
									<span v-if="item.coupon_mode === 2">直接使用</span>
									<span v-if="item.coupon_mode === 3">支付满返券</span>
									<span v-if="item.coupon_mode === 4">本店新用户</span>
									<span v-if="item.coupon_mode === 5">平台新用户</span>
								</p>
								<p>
									<span>名称：</span>
									<span>{{ item.name }}</span>
								</p>
								<p>
									<span>成本承担：</span>
									<span>商家承担{{ item.amount }}元</span>
								</p>
								<p>
									<span>开始时间：</span>
									<span>{{ item.start_date }}</span>
								</p>
								<p>
									<span>结束时间：</span>
									<span>{{ item.expire_date }}</span>
								</p>
								<p>
									<span>创建日期：</span>
									<span>{{ item.created }}</span>
								</p>
							</div>
						</div>
					</div>
					<div v-if="endData.length>0" style="height:1.4rem;background:#efefef;"></div>
				</scroller>
			</div>
		</div>
		<!-- 异常说明 -->
		<div class="errors" v-if="isError">{{ errorText }}</div>
	</div>
</template>

<script>
	import { setCookie, getCookie, removeCookie, clearCookie } from '@/assets/js/cookie.js'
	import { XHeader, Tab, TabItem, Loading } from 'vux';
	import BScroll from "better-scroll";
	import { getUrlParam }  from '@/assets/js/getUrlParam'
	export default {
		name: 'act_list',
		data() {
			return {
				selectIndex: 0, //0-新建活动  1-已创建活动
				selectIndex1: 1, //0-待生效  1-进行中  2-已结束				
				page: 1,
				pageSize: 5,
				processData: [], //进行中				
				page2: 1,
				pageSize2: 5,
				effectData: [], //待生效				
				page3: 1,
				pageSize3: 5,
				endData: [], //已结束
				isError: false,
				errorText: '',
				params: '',
			}
		},
		components: {
			XHeader,
			Tab,
			TabItem,
			Loading
		},
		computed: {

		},
		watch: {

		},
		mounted () {	        
	      		        
	 	},
		created() {
			if(getUrlParam('user_product_id')){
	        	setCookie('user_product_id',getUrlParam('user_product_id'))
	        }else{
	        	setCookie('user_product_id','')
	        }
	      	if(getUrlParam('uid')){
	        	setCookie('uid',getUrlParam('uid'))
	        }else{
	        	setCookie('uid','')
	        }
	        if(getUrlParam('token')){
	        	setCookie('token',getUrlParam('token'))
	        }else{
	        	setCookie('token','')
	        }
			this.params = '?user_product_id='+getCookie('user_product_id')+'&uid='+getCookie('uid')+'&token='+getCookie('token');
			
			this.selectIndex = +this.$route.params.id;			
			if(this.selectIndex === 1) {
				if(this.selectIndex1 === 1) {
					this.infinites1();
				} else if(this.selectIndex1 === 0) {
					this.infinites2();
				} else if(this.selectIndex1 === 2) {
					this.infinites3();
				}
			}
		},		
		methods: {			
			//返回
			goBack() {
				let u = navigator.userAgent;
				let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; // android终端
				let isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); // ios
				if(isAndroid) {
					window.WebView.finish()
				} else if(isiOS) {
					window.location.href = 'mofing://exitbrowser';
				}
			},
			goSeckill() {
				this.$router.push('/seckList');
			},
			goMarket() {
				this.$router.push('/marketList');
			},
			//营销月报
			goMonthlyReport() {
				//this.$router.push('/monthlyReport');
			},
			//新建
			goCreateAct(id) {
				switch(id) {
					case 1:
						this.$router.push('/createAct');
						break;
					case 2:
						this.$router.push('/createOuterAct');
						break;
					case 3:
						this.$router.push('/fullReduce');
						break;
					case 4:
						this.$router.push('/distribution');
						break;
					case 5:
						this.$router.push('/discountAct');
						break;
					case 6:
						this.$router.push('/returnTicket');
						break;
					case 7:
						this.$router.push('/newGuestAct');
						break;
				}
			},
			//活动切换
			onItemClick(id) {
				this.$router.push('/actList/'+id);
				this.selectIndex = id;
				if(this.selectIndex === 1) {
					if(this.selectIndex1 === 1) {
						this.infinites1();
					} else if(this.selectIndex1 === 0) {
						this.infinites2();
					} else if(this.selectIndex1 === 2) {
						this.infinites3();
					}
				}else{
					this.isError = false;
					this.errorText = '';
				}
			},
			//切换状态
			onItemClick2(index) {
				this.errorText = '';
				this.isError = false;
				this.selectIndex1 = index;
				if(this.selectIndex1 === 1) {
					this.process();
				} else if(this.selectIndex1 === 0) {
					this.waitEffect();
				} else if(this.selectIndex1 === 2) {
					this.ends();
				}
			},
			//详情
			goDiscount(id) {
				this.$router.push('/discountGoods/' + id);
			},
			//进行中
			process() {
				this.$vux.loading.show({
					text: ''
				});
				let obj = {};
				obj.uid = getUrlParam('uid') || '';
				obj.token = getUrlParam('token') || '';
				obj.shop_id = getUrlParam('user_product_id') || '';
				obj.page = this.page;
				obj.limit = this.pageSize;
				this.$axiosPost('/coupon/view/process', obj).then(res => {
					if(res.code === 200) {
						if(res.tickets.length === 0){
							this.$refs.myScroller1.finishInfinite(2);
							this.isError = true;
							this.errorText = '暂无数据';
							this.$vux.loading.hide();
							return;
						}
						this.$vux.loading.hide();
						this.processData = this.processData.concat(res.tickets);
						if(res.tickets.length < this.pageSize) {
							this.$refs.myScroller1.finishInfinite(2);
							if(res.tickets.length === 0) {								
								return;
							}
						} else {
							this.page++;
							this.$refs.myScroller1.finishInfinite();
						}
					}
				}).catch(err => {
					this.$refs.myScroller1.finishInfinite(2);
					this.isError = true;
					this.errorText = '服务器异常';
					this.$vux.loading.hide();
				})
			},
			infinites1() {
				this.process();
			},
			//待生效
			waitEffect() {
				this.$vux.loading.show({
					text: ''
				});
				let obj = {};
				obj.uid = getUrlParam('uid') || '';
				obj.token = getUrlParam('token') || '';
				obj.shop_id = getUrlParam('user_product_id') || '';
				obj.page = this.page2;
				obj.limit = this.pageSize2;
				this.$axiosPost('/coupon/view/effective', obj).then(res => {
					if(res.code === 200) {
						if(res.tickets.length === 0){
							this.$refs.myScroller2.finishInfinite(2);
							this.isError = true;
							this.errorText = '暂无数据';
							this.$vux.loading.hide();
							return;
						}
						this.$vux.loading.hide();
						this.effectData = this.effectData.concat(res.tickets);						
						if(res.tickets.length < this.pageSize2) {
							this.$refs.myScroller2.finishInfinite(2);
							if(res.tickets.length === 0) {								
								return;
							}							
						} else {							
							this.page2++;
							this.$refs.myScroller2.finishInfinite();
						}							
					}
				}).catch(err => {
					this.$refs.myScroller2.finishInfinite(2);
					this.isError = true;
					this.errorText = '服务器异常';
					this.$vux.loading.hide();
				})
			},
			infinites2() {
				this.waitEffect();
			},
			//已结束
			ends() {
				this.$vux.loading.show({
					text: ''
				});
				let obj = {};
				obj.uid = getUrlParam('uid') || '';
				obj.token = getUrlParam('token') || '';
				obj.shop_id = getUrlParam('user_product_id') || '';
				obj.page = this.page3;
				obj.limit = this.pageSize3;
				this.$axiosPost('/coupon/view/over', obj).then(res => {
					if(res.code === 200) {
						if(res.tickets.length === 0){
							this.$refs.myScroller3.finishInfinite(2);
							this.isError = true;
							this.errorText = '暂无数据';
							this.$vux.loading.hide();
							return;
						}
						this.$vux.loading.hide();
						this.endData = this.endData.concat(res.tickets);
						if(res.tickets.length < this.pageSize3) {
							this.$refs.myScroller3.finishInfinite(2);
							if(res.tickets.length === 0) {								
								return;
							}
						} else {
							this.page3++;
							this.$refs.myScroller3.finishInfinite();
						}
					}
				}).catch(err => {
					this.$refs.myScroller3.finishInfinite(2);
					this.isError = true;
					this.errorText = '服务器异常';
					this.$vux.loading.hide();
				})
			},
			infinites3() {
				this.ends();
			},
		},
		filters: {
			differDays(val) {
				var dd = new Date(val);
				var d3 = new Date();
				var ss = dd.getTime() - d3.getTime();
				if(ss <= 0) {
					return 0;
				}
				return Math.floor(ss / 86400000);
			},
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
	.myScroller1,
	.myScroller2,
	.myScroller3 {
		top: 2.4rem;		
	}
	
	.act_list {				
		.errors{
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%,-50%);
			font-size: .36rem;		
			color: #aaa;	
		}
		.blanks{
			height: .4rem;
		}
		.content {
			padding-bottom: 2rem;
			background: #fff;
			.header {
				img {
					width: 7.5rem;
				}
			}
			.all_acts {
				border-top: .3rem solid #efefef;
				background: #fff;
				.act_lists {
					width: 90%;
					height: 1.5rem;
					margin: 0 auto;
					display: flex;
					justify-content: space-around;
					align-items: center;
					border-bottom: 1px solid #e5e5e5;
					.act_icon {
						img {
							width: .44rem;
							height: .45rem;
						}
					}
					.act_texts {
						width: 55%;
						text-align: left;
						.act_text {
							display: flex;
							p {
								font-size: .3rem;
								color: #000;
								img {
									width: .5rem;
									height: .2.8rem;
								}
							}
						}
						>p {
							font-size: .26rem;
							color: #a0a0a0;
							margin-top: .1rem;
						}
					}
					.act_btn {
						button {
							width: 1.5rem;
							height: .7rem;
							border: none;
							outline: none;
							background: #06c1ae;
							font-size: .32rem;
							color: #fff;
							border-radius: .1rem;
						}
					}
				}
			}
		}
		.content2 {
			.status_nav {
				display: flex;
				justify-content: center;
				align-items: center;
				background: #fff;
				padding: .2rem 0;
				.tab_status_nav {
					width: 90%;
					height: 90%;
				}
			}
			.goods_lists1,
			.goods_lists2 {
				display: flex;
				justify-content: center;
				align-items: center;
				color: #a0a0a0;
			}
			.goods_lists,
			.wrapper {
				background: #fff;							
				.goods_list {
					border-top: .3rem solid #efefef;
					background: #fff;
					.goods_list_subject {
						display: flex;
						justify-content: space-between;
						padding: .3rem;
						border-bottom: 1px solid #e5e5e5;
						p:nth-of-type(1) {
							font-size: .3rem;
							color: #2a2a2a;
						}
						p:nth-of-type(2) {
							color: #6a6a6a;
							span {
								color: #f6a724;
							}
						}
					}
					.goods_list_sum {
						width: 95%;
						margin: 0 auto;
						padding: .2rem 0;
						display: flex;
						border-bottom: 1px solid #e5e5e5;
						.goods_list_sum_1 {
							text-align: left;
							p {
								font-size: .28rem;
								color: #a0a0a0;
								padding-left: .1rem;
							}
							p:nth-of-type(2) {
								color: #f6a724;
								span {
									font-size: .38rem;
								}
							}
						}
					}
					.goods_list_detail {
						p {
							display: flex;
							margin-top: .3rem;
							padding: 0 .1rem 0 .3rem;
							span:nth-of-type(1) {
								width: 1.5rem;
								text-align: right;
								white-space: nowrap;
								color: #a0a0a0;
							}
							span:nth-of-type(2) {
								color: #000;
								text-align: left;
								margin-left: .1rem;
								padding-right: .1rem;
							}
						}
						.look_details {
							display: flex;
							justify-content: flex-end;
							margin-top: .2rem;
							padding: .2rem;
							border-top: 1px solid #e5e5e5;
							button {
								width: 1.5rem;
								height: .6rem;
								border: 1px solid #06c1ae;
								border-radius: .05rem;
								background: #fff;
								color: #06c1ae;
							}
						}
					}
				}
			}
		}
	}
</style>